<template>
  <div class="common-layout">
    <el-container>
      <el-header><Header></Header></el-header>
      <el-main>
        <div class="singleArtical">
          <!--作者、发布时间、技术  -->
          <div class="el-row">
            <div class="articalDescription">
              <div>{{ author }}</div>
              <div>{{ time }}</div>
              <div>{{ way }}</div>
            </div>
            <!-- 删除 -->
            <el-icon :size="25" class="closeIcon">
              <Close />
            </el-icon>
          </div>
          <!-- 整体和图片row排序 -->
          <div class="el-row">
            <!-- 内容和反馈colmnu排序 -->
            <div class="el-colmnu">
              <div class="Content">
                <div class="title">{{ title }}</div>
                <div class="dis">{{ content }}</div>
              </div>
              <div class="articalFeedback">
                <div>
                  <el-icon class="eachIcon">
                    <View />
                  </el-icon>
                  <span>{{ view }}</span>
                </div>
                <div>
                  <el-icon class="eachIcon">
                    <!-- <Like/> -->
                  </el-icon>
                  <span>{{ like }}</span>
                </div>
                <div>
                  <el-icon class="eachIcon">
                    <ChatRound />
                  </el-icon>
                  <span>{{ comment }}</span>
                </div>
              </div>
            </div>
            <div>
              <el-image style="width: 180px; height: 100px" :src="url" />
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
// import Header from './header.vue';

import Header from './header.vue';
import Main from './main.vue';
import list from './list.vue';

export default {
  components: { Header, Main, list },

  data() {
    return {
      count: 0,
      url: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
      author: '前端喜哥',
      time: '5个月前',
      way: '前端·JavaScript',
      title: 'JavaScript的23种设计模式',
      content: '只要你有优化代码的习惯，那么你在工作场景种会经常接触到各种...',
      view: '1.6w',
      like: '401',
      comment: '32'
    };
  },
  methods: {
    load() {
      this.count += 4;
    }
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.common-layout {
  height: 100%;
  width: 100%;
}
.el-container {
  height: 100%;
  width: 100%;
}

.el-header {
  width: 100%;
  height: 20%;
}

.el-main {
  background-color: #f4f5f5;
  /* color: #333;  */
  text-align: center;
  /* line-height: 160px; */
  width: 100%;
}

.infinite-list {
  height: 800px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}
.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}

.singleArtical {
  display: flex;
  flex-direction: column;
  margin: 0px 50px;
  width: 700px;
  border-top: 1px;
  border-bottom: 1px;
  border-left: 0px;
  border-right: 0px;
  border-color: #bbb;
  border-style: solid;
}

.articalDescription {
  display: flex;
  flex-direction: row;
  /* grid-column: auto; */
}

.articalDescription div {
  /* margin:10px; */
  margin: 10px 0px 5px 0px;
  padding: 0px 20px;
  border-right: 2px solid #bbb;
}

.closeIcon {
  position: absolute;
  /* flex-direction: row-reverse; */
  right: 3%;
  /* flex-direction: row; */
  justify-content: flex-end;
  margin-top: 8px;
}

.Content {
  display: flex;
  justify-content: left;
  flex-direction: column;
  /* flex-wrap: wrap; */
}

.title {
  display: flex;
  font-size: large;
  font-weight: 600;
  justify-self: left;
  margin: 10px 0px 10px 20px;
}

.dis {
  display: flex;
  justify-self: left;
  margin: 0px 0px 10px 20px;
}

.articalFeedback {
  display: flex;
  flex-direction: row;
}

.articalFeedback div {
  margin: 5px 0px 10px 0px;
  padding: 0px 20px;
  border-right: 2px solid #bbb;
}

.eachIcon {
  font-size: 20px;
  top: 5px;
  margin-right: 10px;
}
</style>
